<script setup>
import {computed, reactive, ref} from "vue";

defineProps({
  msg: {
    type: String,
    required: true
  }
})

//简单的模板输出
const count = ref(10)
console.log("count=", count)

//响应式Attribute
const demoId = "demo-id12343343223"

//v-on点击事件
const showContent = ref(false)

function clickButton() {
  count.value += 10
  showContent.value = !showContent.value
  isTextRed.value = !isTextRed.value
}

//计算属性
const doubleCount = computed(() => {
  return count.value * 2
})

//计算属性和函数方法的区别:
//1.计算属性值会基于其响应式依赖被缓存,一个计算属性仅会在其响应式依赖更新时才重新计算 (计算属性会根据变量值的变化实时执行)
//2.函数方法调用总是会在重渲染发生时再次执行函数

//class绑定
const isActive = ref(true)
const isTextRed = ref(true)
const classTextRed = computed(() => {
  return isTextRed.value ? 'text-red' : ''
})

const textRedObject = reactive({
  active: isActive,
  'text-red': isTextRed
})

//style绑定
const colorBlue = ref("blue")
const middleFontSize = ref(30)
const fontMiddleSizeStyle = reactive({
  color: 'green',
  fontSize: '40px'
})
const fontColorRed = reactive({
  color: 'red'
})
const fontSizeClickChange = computed(() => {
  let fontSize = count.value;
  if (fontSize > 30) {
    fontSize = 10 + (fontSize / 10)
  }
  return reactive({
    fontSize: fontSize + 'px'
  })
})



</script>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}

.text-red {
  color: red;
}
</style>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>

  <!--模板输出-->
  <div v-bind:id="demoId">
    <button @click="clickButton">
      <span>Count = {{ count }}</span>
      <span v-if="showContent"> 点击展示或隐藏 </span>
    </button>

    <!--计算属性-->
    <div>
      <p>double count = {{ count }} * 2 = {{ doubleCount }}</p>
    </div>

    <!--类绑定-->
    <div :class="{active: isActive, 'text-red': isTextRed}">类绑定</div>
    <div :class="textRedObject">类绑定 - 绑定对象</div>
    <div :class="[isActive, classTextRed]">类绑定 - 通过绑定一个数组来绑定多个class</div>

    <!--样式绑定-->
    <div :style="{color:colorBlue}">样式绑定</div>
    <div :style="{'font-size': middleFontSize + 'px'}">样式绑定</div>
    <div :style="fontMiddleSizeStyle">样式绑定 - 绑定对象</div>
    <div :style="[fontColorRed, fontSizeClickChange]">样式绑定 - 通过数组绑定</div>

  </div>
</template>
